<template>
  <div class="component-combination">
    <!-- 组件分组 -->
    <div class="header">
      <div class="left">
        <i class="iconfont icon-a-icon-Largescreen"></i>
        <div class="screen-type">主屏:</div>
        <!-- 这里是切换主子屏的 -->
        <el-select v-model="componentGroupName" class="select-area">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <el-button type="primary" @click="handleAddDirectory" :icon="Plus"
        >添加分组</el-button
      >
    </div>
    <!-- {{ treeData }}  -->
    <!-- ---{{ pageConfig }} -->
    <el-tree
      :allow-drop="handleAllowDrag"
      :data="treeData"
      draggable
      default-expand-all
      node-key="id"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <div class="left">
            <div class="circle-icon" v-if="data.type !== 'group'"></div>
            <i
              class="iconfont"
              :class="
                data.type === 'group' ? 'icon-icon-file1' : 'icon-icon-folder'
              "
            ></i>
            {{ data.type === 'group' ? data.label : data.setups.componentName }}

            <!-- {{ data.fartherLock }} -->
          </div>

          <span>
            <i
              class="iconfont icon-delete one-operate"
              @click="handledDeleteItem(node, data)"
              title="删除"
            ></i>
            <i
              class="iconfont icon-icon-copy one-operate"
              title="复制"
              @click="handledCopyItem(node, data)"
            ></i>
            <i
              class="iconfont one-operate"
              title="显示/隐藏"
              @click="handledShowComponent(node, data)"
              :class="!data.show ? 'icon-icon-eye-invisible' : 'icon-icon-eye'"
            >
            </i>
            <i
              class="iconfont one-operate"
              title="锁定"
              @click="handledLockComponent(node, data)"
              :class="!data.lock ? 'icon-icon-unlock' : 'icon-icon-lock'"
            >
            </i>
            <i class="iconfont icon-icon-drag-dot one-operate"></i>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, toRefs, computed } from 'vue';

import { cloneDeep } from 'lodash';

import { makeIdUnique, searchParent } from '@/utils/common';
import { Plus } from '@element-plus/icons-vue';
import useComponentConfig from '@/views/design-center/store/component-config';
const useComponentConfigStore = useComponentConfig();
const { pageConfig } = toRefs(useComponentConfigStore);
const treeData = ref(cloneDeep(pageConfig.value.list));

const componentGroupName = ref('');

componentGroupName.value = pageConfig.value.name;

const groupId = ref(0);

const options = computed(() => {
  return [
    {
      label: pageConfig.value.name,
      value: pageConfig.value.name
    }
  ];
});

/**
 * @description:更新仓库下的pageConfig下的list
 * @return {*}
 */
const handleUpdateCompo = () => {
  // useComponentConfigStore.pageConfig.list = treeData.value;
  // console.log('更新仓库下的pageConfig下的list', treeData.value);
};

/**
 * @description:添加分组
 * @return {*}
 */
const handleAddDirectory = () => {
  groupId.value++;
  treeData.value?.unshift({
    id: `key${Date.now()}`,
    type: 'group',
    label: `分组${groupId.value}`,
    expand: true,
    show: true,
    lock: false,
    fartherLock: false,
    children: []
  });
};

/**
 * @description: 删除组件
 * @param {*} index
 * @param {*} type
 * @param {*} childrenIndex
 * @return {*}
 */
const handledDeleteItem = (node, data) => {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex((d) => d.id === data.id);
  children.splice(index, 1);
  treeData.value = [...treeData.value];
};

/**
 * @description:复制组件
 * @param {*} index
 * @param {*} type
 * @param {*} childrenIndex
 * @return {*}
 */

const handledCopyItem = (node, value) => {
  // 针对复制的数据及其子集递归便利改变id ,让id唯一
  let copyValue = cloneDeep(value);
  copyValue = makeIdUnique(copyValue);

  const parent = node.parent;
  const children = parent.data.children || parent.data;
  children.push(copyValue);
  treeData.value = [...treeData.value];
  console.log('复制的数据--------', value, copyValue, treeData.value);
};

/**
 * @description:是否展示组件
 * @param {*} index
 * @param {*} type
 * @param {*} childrenIndex
 * @return {*}
 */
const handledShowComponent = (node, value) => {
  value.show = !value.show;
  handleUpdateCompo();
};

const changeChildLock = (list, flag) => {
  list.forEach((element) => {
    if (element.children) {
      console.log('dddd-----------');
      element.fartherLock = flag;
      changeChildLock(element.children, flag);
    } else {
      element.fartherLock = flag;
    }
  });
};

/**
 * @description:锁定组件
 * @param {*} index
 * @param {*} type
 * @param {*} childrenIndex
 * @return {*}
 */
const handledLockComponent = (node, value) => {
  value.lock = !value.lock;
  value.fartherLock = !value.fartherLock;
  console.log(value, '是否锁住组件', value.lock);
  if (value.lock) {
    //true-打开,false-关闭
    //父级打开,子集全部打开
    value.children?.length && changeChildLock(value.children, true);
  } else {
    value.children?.length && changeChildLock(value.children, false);
    //父级关闭,子集全部关闭
  }

  handleUpdateCompo();
};

const handleDragStart = (node) => {
  // console.log('drag start', node);
};
const handleDragEnter = (draggingNode, dropNode) => {
  // console.log('tree drag enter:', dropNode.label);
};
const handleDragLeave = (draggingNode, dropNode) => {
  // console.log('tree drag leave:', dropNode.label);
};
const handleDragOver = (draggingNode, dropNode) => {
  // console.log('tree drag over:', dropNode.label);
};
//拖动结束
const handleDragEnd = () => {
  // console.log(treeData)
  // treeData.value = [...treeData.value];
  // console.log('tree drag end:', treeData.value);
  // handleUpdateCompo();
};
const handleDrop = (draggingNode, dropNode, dropType) => {
  // console.log('tree drop:', dropNode.label, dropType);
};
const allowDrop = (draggingNode, dropNode, type) => {
  if (dropNode.data.label === 'Level two 3-1') {
    return type !== 'inner';
  } else {
    return true;
  }
};

const handleAllowDrag = (draggingNode, dropNode, type) => {
  console.log(11111111111111, draggingNode.data, dropNode.data, type);
  //只允许拖入到分组中
  // && ['inner'].includes(type)
  // if (['inner'].includes(type)) {

  // }
  let parentArr = searchParent(pageConfig.value.list, dropNode.data.id);
  console.log(parentArr, 555555555);
  if (
    (draggingNode.data.type === 'group' &&
      dropNode.data.type === 'group' &&
      ['inner'].includes(type)) ||
    (draggingNode.data.type === 'group' &&
      dropNode.data.type !== 'group' &&
      !!parentArr.length)
  ) {
    return false;
  }
  if (
    draggingNode.data.type === 'group' &&
    dropNode.data.type === 'group' &&
    ['prev', 'next'].includes(type)
  ) {
    return true;
  }
  if (dropNode.data.type === 'group') {
    return true;
  } else if (
    dropNode.data.type !== 'group' &&
    ['prev', 'next'].includes(type)
  ) {
    return true;
  }
  return false;
};

defineExpose({
  treeData
});
</script>
<style scoped lang="scss">
.component-combination {
  padding: 0.21rem 0.25rem 0;
  @import '../../styles/reset-select.scss';

  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.16rem;

    .left {
      font-weight: 600;
      display: flex;
      align-items: center;

      .screen-type {
        margin-left: 0.07rem;
      }

      .select-area {
        width: 1.3rem;

        :deep(.el-input__inner) {
          font-weight: 600 !important;
        }
      }
    }
  }

  :deep(.el-tree-node) {
    padding: 0.05rem 0;
  }

  .custom-tree-node {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .icon-icon-file1,
    .icon-icon-folder {
      color: #c9cdd4;
      margin-right: 0.09rem;
    }

    .left {
      display: flex;
      align-items: center;
    }

    .circle-icon {
      width: 0.04rem;
      height: 0.04rem;
      background: #e5e6eb;
      margin-right: 0.17rem;
      border-radius: 50%;
    }
  }

  .one-operate {
    margin-left: 0.16rem;
  }
}
</style>
